<template>
  <div class="login">
    <div class="login-box">
      <el-form ref="loginForm" :rules="rule" :model="loginForm">
        <div class="title-container">
          <h3 class="title">
            <img src="@/assets/common/login-logo.png" alt="" />
          </h3>
        </div>
        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile">
            <template #prefix>
              <i class="el-icon-user"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password">
            <template #prefix>
              <i class="el-icon-lock"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="handleLogin"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { login } from '@/api/user'
import { validMobile } from "@/utils/validate";
export default {
  name: "login-page",
  data() {
    //callback什么也不传 代表的是校验通过 callback(new Error())校验失败
    const validateMobile = (rule, value, callback) => {
      //const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      if (validMobile(value)) {
        callback();
      } else {
        callback(new Error("手机号格式不对"));
      }
    };
    return {
      loginForm: {
        mobile: "13800000002",
        password: "123456",
      },
      rule: {
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { validator: validateMobile, trigger: "blur" },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            min: 6,
            max: 16,
            message: "密码的长度在6-16位之间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    async handleLogin() {
      try {
        //二次校验
        await this.$refs.loginForm.validate();
        //ajax请求
        console.log(this.loginForm);
        this.$store.dispatch("user/login", this.loginForm);
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.login-box {
  position: fixed;
  width: 520px;
  // background-color: pink;
  box-shadow: 0 0 1px #ccc;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.login {
  background-color: rgb(94, 157, 255);
  width: 100%;
  height: 100%;
}
</style>
